@import (reference) '../../../../.dumi/theme/styles/variables.less';

.colors {
  padding: 12px;

  .container {
    padding: 12px;
  }

  .color-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .name {
    white-space: nowrap;
    font-size: 16px;
    margin-right: 18px;
  }

  .name-width-sm {
    width: 76px;
  }

  .name-width-lg {
    width: 120px;
  }

  .desc {
    font-size: 12px;
  }

  .color-unit-wrapper {
    display: flex;
    align-items: center;
  }

  .color-unit-cell {
    // width: 200px;
    display: flex;
    align-items: center;
    margin: 6px 0;
    flex-wrap: wrap;
  }

  .color-block {
    flex-shrink: 0;
    width: 100px;
    height: 50px;
    border-radius: 6px;
    margin: 6px 9px 6px 0;
  }

  .color-value {
    font-size: 16px;
    margin-right: 30px;
    white-space: nowrap;
  }

  @media only screen and (max-width: 400px) {
    .color-value {
      font-size: 12px;
    }
  }
}
